<template>
  <div class="test" @mousemove="test" @click="test">
    <div>
      <div ref="testdiv1" class="box_1"></div>
      <div ref="testdiv2" class="box_2"></div>
      <div ref="testdiv3" class="box_3"></div>
      <div ref="testdiv4" class="box_4">
        <div class="box_5"></div>
        <div class="box_6"></div>
        <div class="box_7"></div>
        <div class="box_8"></div>
      </div>
      <div ref="testdiv5" class="box_4s1">
        <div class="box_5"></div>
        <div class="box_6"></div>
        <div class="box_7"></div>
        <div class="box_8"></div>
      </div>
      <div ref="testdiv6" class="box_4s2">
        <div class="box_5"></div>
        <div class="box_6"></div>
        <div class="box_7"></div>
        <div class="box_8"></div>
      </div>
      <div ref="testdiv7" class="box_4s3">
        <div class="box_5"></div>
        <div class="box_6"></div>
        <div class="box_7"></div>
        <div class="box_8"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, nextTick } from 'vue';

const X = ref(0)
const Y = ref(0)
const testdiv1 = ref<HTMLElement | null>(null)
const testdiv2 = ref<HTMLElement | null>(null)
const testdiv3 = ref<HTMLElement | null>(null)
const testdiv4 = ref<HTMLElement | null>(null)
const testdiv5 = ref<HTMLElement | null>(null)
const testdiv6 = ref<HTMLElement | null>(null)
const testdiv7 = ref<HTMLElement | null>(null)
const test = (e: MouseEvent) => {
  X.value = e.clientX
  Y.value = e.clientY
  if (testdiv1.value && testdiv2.value && testdiv3.value && testdiv4.value
    && testdiv5.value && testdiv6.value && testdiv7.value) {

    testdiv1.value.style.left = (X.value - 15) + 'px'
    testdiv1.value.style.top = (Y.value - 15) + 'px'

    testdiv2.value.style.left = (X.value - 15) + 'px'
    testdiv2.value.style.top = (Y.value - 15) + 'px'

    testdiv3.value.style.left = (X.value - 10) + 'px'
    testdiv3.value.style.top = (Y.value - 10) + 'px'
    testdiv3.value.style.animation = "box3An 2s linear infinite "

    testdiv4.value.style.left = (X.value - 30) + 'px'
    testdiv4.value.style.top = (Y.value - 30) + 'px'

    testdiv5.value.style.left = (X.value - 30) + 'px'
    testdiv5.value.style.top = (Y.value - 30) + 'px'

    testdiv6.value.style.left = (X.value - 30) + 'px'
    testdiv6.value.style.top = (Y.value - 30) + 'px'

    testdiv7.value.style.left = (X.value - 30) + 'px'
    testdiv7.value.style.top = (Y.value - 30) + 'px'

    // testdiv4.value.style.transform =
    // window.scrollTo(3000, 100);

  }
}
watch([X, Y], ([val1, val2]) => {

})
onMounted(() => {

})
</script>
<style lang="less" scoped>
.test {
  width: 100%;
  height: 100%;
  // pointer-events: none;
  position: fixed;
  z-index: 2;
}
.box_1 {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid rgb(103, 103, 197);
  animation: boxAn 1s linear infinite;
  transform: rotate(45deg);
}
.box_2 {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid rgb(129, 129, 226);
  animation: waves 2s linear infinite;
}
.box_3 {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgb(147, 147, 219);
  // animation: box3An 2s linear infinite;
}

// 马赛克
.box_4 {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid rgb(145, 18, 18, 0.5);
  animation: box4An 1s linear infinite;
}
.box_5 {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: rgb(25, 146, 140);
}
.box_6 {
  position: absolute;
  width: 5px;
  height: 5px;
  margin-left: 4px;
  background-color: rgb(235, 50, 26);
  border-left: 0.5px solid rgb(15, 1, 1);
}
.box_7 {
  position: absolute;
  width: 5px;
  height: 5px;
  margin-top: 4px;
  background-color: rgb(241, 185, 29);
  border-right: 0.5px solid rgb(15, 1, 1);
  border-top: 0.5px solid rgb(15, 1, 1);
}
.box_8 {
  position: absolute;
  width: 5px;
  height: 5px;
  margin-top: 4px;
  margin-left: 4px;
  background-color: rgb(30, 130, 245);
  border-top: 0.5px solid rgb(15, 1, 1);
  border-left: 0.5px solid rgb(15, 1, 1);
}

.box_4s1 {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid rgb(145, 18, 18, 0.5);
  animation: box4s1 1s linear infinite;
}
.box_4s2 {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(7, 124, 233, 0.5);
  animation: box4s2 1s linear infinite;
}
.box_4s3 {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(5, 0, 2, 0.5);
  animation: box4s3 0.8s linear infinite;
}
</style>
